<template>
    <div class="fromEdit">
        <div class="addbtn">
            <el-button type="primary" @click="addFrom"><Icon type="md-add" />新增外部参数配置</el-button>
            <el-button type="primary" @click="commitFrom"> 提 交 </el-button>
            <el-button type="" @click="$parent.showList()"> 返 回 </el-button>
        </div>

        <div>
            <el-collapse v-model="activeNames">
                <el-collapse-item v-for="(item,index) in fromList" :key="index+1" :title="'第('+(index+1)+')条'" :name="index+1">
                    <div>
                        <label for="">字段名称：</label>
                        <el-input v-model="item.filedName" clearable placeholder="请输入内容"></el-input></div>
                    <div>
                        <label for="">中文名称：</label>
                        <el-input v-model="item.filedCnName" clearable placeholder="请输入内容"></el-input></div>
                    <div>
                        <label for="">字段类型：</label>
                        <el-select v-model="item.type" clearable class="el-input" @change="changeTypeData(item.type,index)" placeholder="请选择">
                            <el-option
                            v-for="item in typeOptions"
                            :key="item"
                            :label="item"
                            :value="item">
                            </el-option>
                        </el-select>
                    </div>
                    <div>
                        <label for="">字段解释：</label>
                        <el-input v-model="item.explain" clearable placeholder="请输入内容"></el-input></div>
                    <div style="width: 15%;">
                        <label for="">是否必传：</label>
                        <template>
                            <el-radio v-model="item.required" :label='label1'>是</el-radio>
                            <el-radio v-model="item.required" :label='label2'>否</el-radio>
                        </template>
                    </div>
                    <div style="width: 15%;">
                        <label for="">是否可编辑：</label>
                        <template>
                            <el-radio v-model="item.allowChange" :label='label1'>是</el-radio>
                            <el-radio v-model="item.allowChange" :label='label2'>否</el-radio>
                        </template>
                    </div>
                    <div v-if="item.type=='date'">
                        <label for="">时间格式：</label>
                        <el-select class="el-input" v-model="item.timeType" placeholder="请选择">
                            <el-option
                            v-for="item in [{v:'yyyy-MM-dd',k:'start'},{v:'HH:mm:ss',k:'end'},{v:'yyyy-MM-dd HH:mm:ss',k:'all'}]"
                            :key="item.k"
                            :label="item.v"
                            :value="item.k">
                            </el-option>
                        </el-select>
                    </div>
                    <div v-if="item.type=='api'">
                        <label for="">地址：</label>
                        <el-input v-model="item.url" clearable placeholder="请输入内容"></el-input></div>
                        <div v-if="item.type=='select'||item.type=='selectDic'">
                        <label for="">选项key：</label>
                        <el-input v-model="item.children.key" clearable placeholder="请输入内容"></el-input></div>


<!-- ======================================== -->
                    <div v-if="item.type=='webSession'">
                        <label for="">选项key：</label>
                        <el-input v-model="item.webSessionKey" clearable placeholder="请输入内容"></el-input></div>
                  
                    <div v-if="item.type=='sql'">
                        <label for="">SQL：</label>
                        <el-input v-model="item.sql" clearable placeholder="请输入内容"></el-input></div>
<!-- ======================================== -->



                    <div v-if="item.type=='api'">
                        <label for="">默认值：</label>
                        <el-input v-model="item.defaultValue" clearable placeholder="请输入内容"></el-input></div>
                    <div v-if="item.type=='api'">
                        <label for="">数据结构：</label>
                        <el-input v-model="item.resultPath" clearable placeholder="请输入内容"></el-input></div>
                    <div style="padding-left: 20px;width: 10%;">
                        <el-popconfirm :title="'确定删除第'+(index+1)+'条数据吗？'" icon-color="#f00" @confirm="deleteRowData(index)">
                            <el-button slot="reference" type="danger" size="mini" ><i style="font-size: 16px;" class="el-icon-delete"></i></el-button>
                        </el-popconfirm>
                    </div>
                    <div v-if="item.type=='api'" class="requestBodyClass" style="width: 100%;display: block;">
                        <el-divider content-position="left">
                            <el-button  size="mini" @click="addrequestBody(index)"><Icon type="md-add" />请求参数</el-button>
                        </el-divider>
                        <div class="requestBodyContent">
                            <div v-for="(chItem,chIndex) in item.requestBody" :key="chIndex">
                                <p>
                                    <label for="">字段名：</label>
                                    <el-input clearable v-model="chItem.filedName" placeholder="请输入内容"></el-input>
                                </p>
                                <p>
                                    <label for="">字段中文名：</label>
                                    <el-input clearable v-model="chItem.filedCnName" placeholder="请输入内容"></el-input>
                                </p>
                                <p>
                                    <label for="">是否必传：</label>
                                    <el-radio v-model="chItem.required" :label="label1">是</el-radio>
                                    <el-radio v-model="chItem.required" :label="label2">否</el-radio>
                                    <el-popconfirm title="确定删除吗？" icon-color="#f00" @confirm="reduceListFun(index,chIndex)">
                                        <i slot="reference" title="删除请求参数"  class="el-icon-delete-solid parDel" />
                                    </el-popconfirm>
                                    
                                </p>
                            </div>
                        </div>
                    </div>
                    <div v-if="item.type=='select'" class="requestBodyClass" style="width: 100%;display: block;">
                        <el-divider content-position="left">
                            <el-button  size="mini" @click="addSelectrequestBody(index)"><Icon type="md-add" />下拉选项</el-button>
                        </el-divider>
                        <div class="requestBodyContent">
                            <div v-for="(chItem,chIndex) in item.children.options" :key="chIndex">
                                <p>
                                    <label for="">选项名：</label>
                                    <el-input clearable v-model="chItem.optionName" placeholder="请输入内容"></el-input>
                                </p>
                                <p>
                                    <label for="">选项值：</label>
                                    <el-input clearable v-model="chItem.optionValue" placeholder="请输入内容"></el-input>
                                </p>
                                <p>
                                    <el-popconfirm title="确定删除吗？" icon-color="#f00" @confirm="reduceListSelectFun(index,chIndex)">
                                        <i slot="reference" title="删除请求参数"  class="el-icon-delete-solid parDel" />
                                    </el-popconfirm>
                                    
                                </p>
                            </div>
                        </div>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
</template>

<script>
  import request from '@/utils/request'
export default{
    props:{
        getSelectObj:{
            type:Object,
            default:()=>{
                return{}
            },
            require:true
        }
    },
    data(){
        return {    
            label1:true,
            label2:false,
            fromList:[],
            obj:{
                "explain":"",
                "filedName": "",
                "type": "",
                "filedCnName": "",
                "url": "",
                "requestMethod": "post",
                "timeType":'',
                "sql":"",
                "webSessionKey":"",
                "requestBody": [],
                "children":{
                    "key":"",
                    "options":[]
                },
                "allowChange":false,
                "required":false,
                "defaultValue": "",
                "resultPath": ""
            },
            typeOptions:['string','number','api','select','selectDic','date','sql','webSession','textarea'],
            activeNames:''
        }
    },
    mounted(){
        this.$nextTick(res=>{
            let parObj = JSON.parse(this.getSelectObj)

            if(parObj){
                this.fromList = parObj.param?JSON.parse(parObj.param):[]
                console.log(this.fromList)
            }

            
            if(this.fromList.length!=0){
                this.activeNames = []
                this.fromList.forEach((item,index)=>{
                    this.activeNames.push(index+1)
                })
            }
        })
    },   
    methods:{
        commitFrom(){
            this.fromList.forEach((item,index)=>{
                if(item.type!='api'){// 清理字段
                    delete item.url
                    delete item.requestMethod
                    delete item.requestBody
                    delete item.defaultValue
                    delete item.resultPath
                }
                if(item.type!='select'){// 清理字段
                }
            })
            let count = -1;
            foo:for(let i=0;i<this.fromList.length;i++){
                let item = this.fromList[i]
                if(item.type=='api'){
                    if(!item.filedName||!item.type||!item.filedCnName||!item.url||!item.defaultValue||!item.resultPath){
                        count = i
                        break
                    }else{
                        if(item.requestBody && item.requestBody.length!=0){
                            for(let j=0;j<item.requestBody.length;j++){
                                let chitem = item.requestBody[j]
                                if(!chitem.filedName||!chitem.filedCnName|| typeof chitem.required != 'boolean'){
                                    count = i
                                    break foo;
                                }
                            }
                        }
                    }
                }else if(item.type=='select'){
                    if(!item.filedName||!item.type||!item.filedCnName||!item.children.key){
                        count = i
                        break
                    }else{
                        let opLIst = item.children.options
                        if(opLIst && opLIst.length!=0){
                            for(let j=0;j<opLIst.length;j++){
                                let chitem = opLIst[j]
                                if(!chitem.optionName||!chitem.optionValue){
                                    count = i
                                    break foo;
                                }
                            }
                        }
                    }
                }else if(item.type=='date'){
                    if(!item.filedName||!item.type||!item.filedCnName||!item.timeType){
                        count = i
                        break
                    }
                }else{
                    if(!item.filedName||!item.type||!item.filedCnName){
                        count = i
                        break
                    }
                }
            }
            if(count!=-1){
                this.$message.error(`请把第${count+1}条数据填写完整`)
                return 
            }else{
                this.commitjk(this.fromList)
            }
        },
        commitjk(v){
            request({
                    url: '/ht-bpmn/externalParameterEntity/saveOrUpdate',
                    method: 'post',
                    data:{
                        id:JSON.parse(this.getSelectObj).id,
                        param:JSON.stringify(v)
                    }
                }).then(res => {
                    if (res.code == 200) {
                        this.$parent.showList('true')
                        this.fromList = []
                        this.$message.success(res.msg)
                    } else {
                        this.$message.error(res.msg)
                    }
                })
        },
        deleteRowData(index){
            const a = JSON.parse(JSON.stringify(this.fromList))
            a.splice(index, 1)
            this.fromList = JSON.parse(JSON.stringify(a))
        },
        reduceListSelectFun(index,chIndex){
            const a = JSON.parse(JSON.stringify(this.fromList[index].options))
            a.splice(chIndex, 1)
            this.fromList[index].options = JSON.parse(JSON.stringify(a))
        },
        reduceListFun(index,chIndex) {
            const a = JSON.parse(JSON.stringify(this.fromList[index].requestBody))
            a.splice(chIndex, 1)
            this.fromList[index].requestBody = JSON.parse(JSON.stringify(a))
        },
        addSelectrequestBody(index){
            let a = JSON.parse(JSON.stringify(this.fromList))
            a[index].children.options.push({
                "optionName": "",
                "optionValue": ""
            })
            this.fromList = JSON.parse(JSON.stringify(a))
        },
        addrequestBody(index){
            let a = JSON.parse(JSON.stringify(this.fromList))
            a[index].requestBody.push({
                "filedName": "",
                "filedCnName": "",
                "required": true
            })
            this.fromList = JSON.parse(JSON.stringify(a))
        },
        addListFun(){

        },
        addFrom(){
            this.fromList.push({...this.obj})
            console.log(this.fromList)
            this.activeNames = this.fromList.length
        },
        deleteOutFrom(){

        },
        deleteInnerFrom(){

        },
        changeTypeData(type,index){
            if(type=='api'){
                this.fromList[index].requestBody =[]
            }
            if(type=='select'||type=='sql'){
                if(!this.fromList[index].hasOwnProperty('children')){
                    this.$set(this.fromList[index],'children',{key:"",options:[]})
                }else{
                    this.fromList[index].children.options =[]
                }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.fromEdit{
    position: relative;
    .addbtn{
        // position: fixed;
        background: #fff;
        width: 100%;
        z-index: 999;
        padding:0 0 10px 0;
    }
}
.parDel{
    color: red;
    line-height: 32px;
    margin-left: 10px;
    font-size: 18px;
    cursor: pointer;
}
>>>.el-collapse-item__wrap{
    padding-top: 20px;
}
>>>.el-collapse-item__header{
    background: #f2f5f8;
    padding-left: 10px;
}
>>>label.el-radio {
    width: 45px !important;
    display: inline-block;
    margin-right: 10px;
}
.requestBodyClass{
    .requestBodyContent{
        >div{
            display: flex;
            flex-direction: row;
            margin-bottom: 10px;
            p{
                display: flex;
                flex-direction: row;
                width: 20%;
            }
        }
    }
}
>>>.el-collapse-item__content {
    padding-bottom: 25px;
    font-size: 13px;
    color: #303133;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    >div{
        display: flex;
        flex-direction: row;
        width: 20%;
        margin-bottom: 10px;
        label{
            display: inline-block;
            width: 110px;
            text-align: right;
            line-height: 32px;
            font-size: 12px;
            font-weight: normal;
        }
    }
}
</style>